<template>
  <PageWrapper title="动态表单示例">
    <div class="mb-4">
      <a-button @click="changeLabel3" class="mr-2"> 更改字段3label </a-button>
      <a-button @click="changeLabel34" class="mr-2">
        同时更改字段3,4label
      </a-button>
      <a-button @click="appendField" class="mr-2">
        往字段3后面插入字段10
      </a-button>
      <a-button @click="deleteField" class="mr-2"> 删除字段11 </a-button>
    </div>
    <CollapseContainer title="动态表单示例,动态根据表单内其他值改变">
      <BasicForm @register="register" />
    </CollapseContainer>

    <CollapseContainer class="mt-5" title="componentProps动态改变">
      <BasicForm @register="register1" />
    </CollapseContainer>
  </PageWrapper>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { BasicForm, FormSchema, useForm } from '@/components/form/index'
import { CollapseContainer } from '@/components/container/index'
import { PageWrapper } from '@/components/page'

const schemas: FormSchema[] = [
  {
    field: 'field1',
    component: 'Input',
    label: '字段1',
    colProps: {
      span: 8,
    },
    show: ({ values }) => {
      return !!values.field5
    },
  },
  {
    field: 'field2',
    component: 'Input',
    label: '字段2',
    colProps: {
      span: 8,
    },
    ifShow: ({ values }) => {
      return !!values.field6
    },
  },
  {
    field: 'field3',
    component: 'DatePicker',
    label: '字段3',
    colProps: {
      span: 8,
    },
    dynamicDisabled: ({ values }) => {
      return !!values.field7
    },
  },
  {
    field: 'field4',
    component: 'Select',
    label: '字段4',
    colProps: {
      span: 8,
    },
    dynamicRules: ({ values }) => {
      return values.field8 ? [{ required: true, message: '字段4必填' }] : []
    },
    componentProps: {
      options: [
        {
          label: '选项1',
          value: '1',
          key: '1',
        },
        {
          label: '选项2',
          value: '2',
          key: '2',
        },
      ],
    },
  },
  {
    field: 'field11',
    component: 'DatePicker',
    label: '字段11',
    colProps: {
      span: 8,
    },
  },
  {
    field: 'field5',
    component: 'Switch',
    label: '是否显示字段1(css控制)',
    colProps: {
      span: 8,
    },
    labelWidth: 200,
  },
  {
    field: 'field6',
    component: 'Switch',
    label: '是否显示字段2(dom控制)',
    colProps: {
      span: 8,
    },
    labelWidth: 200,
  },
  {
    field: 'field7',
    component: 'Switch',
    label: '是否禁用字段3',
    colProps: {
      span: 8,
    },
    labelWidth: 200,
  },
  {
    field: 'field8',
    component: 'Switch',
    label: '字段4是否必填',
    colProps: {
      span: 8,
    },
    labelWidth: 200,
  },
]

const schemas1: FormSchema[] = [
  {
    field: 'f1',
    component: 'Input',
    label: 'F1',
    colProps: {
      span: 12,
    },
    labelWidth: 200,
    componentProps: ({ formModel }) => {
      return {
        placeholder: '同步f2的值为f1',
        onChange: (e: ChangeEvent) => {
          formModel.f2 = e.target.value
        },
      }
    },
  },
  {
    field: 'f2',
    component: 'Input',
    label: 'F2',
    colProps: {
      span: 12,
    },
    labelWidth: 200,
    componentProps: { disabled: true },
  },
  {
    field: 'f3',
    component: 'Input',
    label: 'F3',
    colProps: {
      span: 12,
    },
    labelWidth: 200,
    // @ts-ignore
    componentProps: ({ formActionType }) => {
      return {
        placeholder: '值改变时执行查询,查看控制台',
        onChange: async () => {
          const { validate } = formActionType
          // tableAction只适用于在表格内开启表单的例子
          // const { reload } = tableAction;
          const res = await validate()
          console.log(res)
        },
      }
    },
  },
]

export default defineComponent({
  components: { BasicForm, CollapseContainer, PageWrapper },
  setup() {
    const [
      register,
      { setProps, updateSchema, appendSchemaByField, removeSchemaByFiled },
    ] = useForm({
      labelWidth: 120,
      schemas,
      actionColOptions: {
        span: 24,
      },
    })
    const [register1] = useForm({
      labelWidth: 120,
      schemas: schemas1,
      actionColOptions: {
        span: 24,
      },
    })
    function changeLabel3() {
      updateSchema({
        field: 'field3',
        label: '字段3 New',
      })
    }
    function changeLabel34() {
      updateSchema([
        {
          field: 'field3',
          label: '字段3 New++',
        },
        {
          field: 'field4',
          label: '字段4 New++',
        },
      ])
    }

    function appendField() {
      appendSchemaByField(
        {
          field: 'field10',
          label: '字段10',
          component: 'Input',
          colProps: {
            span: 8,
          },
        },
        'field3',
      )
    }
    function deleteField() {
      removeSchemaByFiled('field11')
    }
    return {
      register,
      register1,
      schemas,
      setProps,
      changeLabel3,
      changeLabel34,
      appendField,
      deleteField,
    }
  },
})
</script>
